<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: pink;
        }
        .container{
            overflow: hidden;
            position: relative;
            margin: 300px auto;
            border: 3px solid #eee;
            user-select:none;
        }
        .wraper img{
            display: block;
            float: left;
            width: 520px;
            height: 280px;
        }
        .container ul{
            position: absolute;
            left: 50%;
            margin-left: -36px;
            bottom: 10px;
            width: 72px;
            height: 14px;
        }
        .container ul li{
            float: left;
            width: 8px;
            height: 8px;
            margin: 3px;
            border-radius: 50%;
            border: 2px solid dodgerblue;
            background: #fff;
            list-style: none;
            cursor: pointer;
        }
        .container ul li.liactive{
            background-color: dodgerblue;
        }
        .container .prevbtn{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            line-height: 280px;
            color: #fff;
            font-size: 40px;
            cursor: pointer;
        }
        .container .nextbtn{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            line-height: 280px;
            color: #fff;
            font-size: 40px;
            cursor: pointer;
        }
        .hide{
            display: none;
        }
        .show{
            display: block;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- 轮播内容 -->
        <div class="wraper">
            <img src="images/banner1.jpg" alt=""><!--
        --><img src="images/banner2.jpg" alt=""><!--
        --><img src="images/banner3.jpg" alt=""><!--
        --><img src="images/banner4.jpg" alt="">
        </div>
        <!-- 分页器小按钮 -->
        <ul>
            <li class="liactive"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 左右按钮 -->
        <div class="prevbtn iconfont">&#xe779;</div>
        <div class="nextbtn iconfont">&#xe775;</div>
    </div>

    <script>
        var container = document.querySelector('.container')
        var wrap = container.querySelector('.wraper')
        var prevbtn = container.querySelector('.prevbtn')
        var nextbtn = container.querySelector('.nextbtn')
        var imgList = wrap.children
        var imgWidth = wrap.querySelector('img').offsetWidth    //宽度数值不带单位
        var imgHeight = wrap.querySelector('img').offsetHeight

        // 初始化轮播图
        //  复制第一个图片插入最后，复制最后一个图片插入最前
        wrap.appendChild(imgList[0].cloneNode(true))
        wrap.insertBefore(imgList[imgList.length-2].cloneNode(true), imgList[0])

        container.style.width = imgWidth+'px'
        container.style.height = imgHeight+'px'

        wrap.style.width = imgList.length*100 + '%'
        wrap.style.height = '100%'

        prevbtn.classList.add('hide')
        nextbtn.classList.add('hide')

        var liArr = document.querySelectorAll('.container li')

        var i=1
        wrap.style.transform = 'translateX('+ -imgWidth*i +'px)'
        var timer = setInterval(autoPlay,2000)

        function autoPlay() {
            i++
            startSwiper()
        }

        function startSwiper(){
            wrap.style.transitionDuration = '0.3s'
            wrap.style.transform = 'translateX('+ -imgWidth*i +'px)'
        }

        var swiperFlag =  true;      //设置左右切换标记防止连续点击
        wrap.addEventListener('transitionend',function (e) {
            wrap.style.transitionDuration = '0s'
            if (i>=imgList.length-1){
                i=1
                wrap.style.transform = 'translateX('+ -imgWidth*i +'px)'
            }
            if (i<=0){
                i=imgList.length-2
                wrap.style.transform = 'translateX('+ -imgWidth*i +'px)'
            }

            //分页器跟随变化
            for (let i=0;i<liArr.length;i++){
                liArr[i].classList.remove('liactive')
            }
            if (i==5){
                liArr[0].classList.add('liactive')
            }else if (i==0) {
                liArr[liArr.length-1].classList.add('liactive')
            }else {
                liArr[i-1].classList.add('liactive')
            }

            // 切换完成
            swiperFlag = true
        })

        // 点击分页器图片切换
        liArr.forEach((item,index)=>{
            item.onclick = function () {
                i = index+1
                startSwiper()
            }
        })

        // 点击按钮切换图片
        prevbtn.onclick = function () {
            // 判断切换是否完成
            if (swiperFlag){
                i--
                startSwiper()
                // 点击后切换未完成
                swiperFlag = false
            }
        }
        nextbtn.onclick = function () {
            if (swiperFlag){
                i++
                startSwiper()
                swiperFlag = false
            }
        }

        //鼠标进入时停止滚动
        container.addEventListener('mouseenter', function () {
            clearInterval(timer)
            prevbtn.classList.remove('hide')
            nextbtn.classList.remove('hide')
            prevbtn.classList.add('show')
            nextbtn.classList.add('show')
        })

        //鼠标离开时恢复滚动
        container.addEventListener('mouseleave', function () {
            clearInterval(timer)
            timer = setInterval(autoPlay,2000)
            prevbtn.classList.remove('show')
            nextbtn.classList.remove('show')
            prevbtn.classList.add('hide')
            nextbtn.classList.add('hide')
        })

        // 鼠标点击拖动跟随移动
        let startX = 0
        let moveX = 0
        // 设置点击判断，避免连续点击轮播图一直不停的快速切换
        let clickFlag = false
        container.onmousedown = function (e) {
            startX = e.clientX
            clickFlag = true
        }
        document.onmousemove = function (e) {
            e.preventDefault()
            if (clickFlag) {
                moveX = startX - e.clientX
                wrap.style.transform = 'translateX('+ (-imgWidth*i -moveX) +'px)'
            }
        }
        document.onmouseup = function (e) {
            if (moveX>0){
                if (moveX>imgWidth/2) {
                    i++
                }
                startSwiper()
            }
            if (moveX<0){
                if (Math.abs(moveX)>imgWidth/2) {
                    i--
                }
                startSwiper()
            }
            clickFlag = false
        }

    </script>
</body>
</html>




